<template>
  <div v-if="isOpend2" class="wrapper"> <!--v-if="routes.length" -->
    <!-- <div v-for="(route,index) in routes" :key="index">
      <div
        v-if="!route.meta?.hidden"
        class="first-level"
        :class="{ selectedBar: currentRouteId === route.name }"
        @click.stop="handleClick(route)"
      >
        <div class="routeTitle">
          <component
        class="menu-icon"
        v-if="route.meta"
        theme="outline"
        size="12"
        strokeWidth="3"
        :is="route.meta.icon"
      />
          {{ route.meta?.title || route.name }}
        </div>
        <div v-if="route.children" class="openBtn" :class="{ opened: route.opened }"></div>
      </div>
      <div v-else class="first-level undone2">
        <div class="routeTitle undone2">
          
          {{ route.meta?.title || route.name }}
        </div>
      </div>
      <template v-if="route.children && route.opened">
        <template v-for="child in route.children" :key="child.menuId">
          <div
            v-if="!child.meta?.hidden"
            class="first-level levelChild"
            :class="{ selectedBar: currentRouteId === child.name }"
            @click.stop="handleClick(child)"
           
          >
            <div class="routeTitle">
              <component
              class="menu-icon"
              v-if="child.meta"
              theme="outline"
              size="12"
              strokeWidth="3"
              :is="child.meta.icon"
            />
              {{ child.meta?.title || child.name }}
            </div>
            <div v-if="child.children" class="openBtn" :class="{ opened: child.opened }"></div>
          </div>
          <div v-else class="first-level levelChild undone2">
            <div class="routeTitle undone2">
              {{ child.meta?.title || child.name }}
            </div>
          </div>
        </template>
      </template>
    </div> -->
    <el-scrollbar height="100vh">
    <el-menu
      :default-active="defaultActive"
      :background-color="menuBgColor"
      :default-openeds="defaultOpened"
      :unique-opened="uniqueOpenedFlag"
      class="el-menu-vertical"
      :class="{ 'is-black': isBlack }"
      :collapse="isCollapse"
      :text-color="textColor"
      :active-text-color="activeTextColor"
      router
      :mode="mode"
      @open="handleOpen"
      @close="handleClose"
    ><!--:active-text-color="activeTextColor"-->
      <Logo v-if="isLogo" />
      <template v-for="item in routes">
        <template v-if="!item.hidden">
          <MenuItems :item="{ ...item, isBlack }" :key="item.path" />
        </template>
      </template>
    </el-menu>
  </el-scrollbar>
      <!-- <template v-for="(item,index) in routes" :key="index">
        <template v-if="!item.hidden">
          <Tindex :route="item" />
        </template>
      </template> -->

  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import Tindex from './Tindex.vue';
import MenuItems from './MenuItems.vue';
import { themeConfig } from '@/config/theme';
import { setting } from '@/config/setting';
const { defaultOpeneds, uniqueOpened } = setting;
const { themeOptions } = themeConfig;
const whiteColors = ['#fff', '#ffffff', '#FFF', '#FFF', 'rgb(255, 255, 255)'];
const uniqueOpenedFlag = ref(uniqueOpened);
const store = useStore();
const currentRouteId = computed(() => {
    return store.getters['routes/currentRouteId'];
  });
  const isOpend2 = computed(() => {
    return store.getters['routes/isOpend2'];
  });
const routes = computed(() => {
    return store.getters['routes/api2Routes'];
  });
  const theme = computed(() => {
    return store.getters['setting/theme'];
  });

  const menuBgColor = computed(() => {
    return themeOptions[theme.value].menuBgColor;
  });

  const isBlack = computed(() => {
    return whiteColors.indexOf(menuBgColor.value) === -1;
  });

  const textColor = computed(() => {
    return whiteColors.indexOf(menuBgColor.value) !== -1 ? '#333' : '#fff';
  });

  const activeTextColor = computed(() => {
    document.body.style.setProperty('--el-color-primary', themeOptions[theme.value].primary)
    return themeOptions[theme.value].primary
     ;
    // const mcolor = whiteColors.indexOf(menuBgColor.value) !== -1;
    // return mcolor ? theme.value : '#fff';
  });

  const defaultOpened = computed(() => {
    return defaultOpeneds;
  });

  // const defaultActive = computed(() => {
  //   const { fullPath } = router.currentRoute.value;
  //   return fullPath || '/index';
  // });

  const handleOpen = (key, keyPath) => {
    console.log('open:', key, keyPath);
  };

  const handleClose = (key, keyPath) => {
    console.log('close:', key, keyPath);
  };
function handleClick(route) {
  console.log(route,'点击了')
  store.commit('routes/setCurrentRouteId', route.name)
  if (route.children) {
    if (!route.opened) route.opened = true
    else {
      route.opened = !route.opened
    }
    return
  }
}

</script>

<style lang="scss" scoped>
.wrapper {
  width: 178px;
  padding: 8px;
  height: 100vh;
  z-index: 200;
  position: absolute;
  margin-left: 235px;
  // height: calc(100vh - 64px);
  background-color: #fff;
  // border-right: 1px solid #dddddd;

  #title {
    height: 44px;
    padding-left: 19px;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    line-height: 44px;
  }

  .first-level {
    display: flex;
    position: relative;
    align-items: center;
    width: 164px;
    height: 40px;
    font-size: 14px;
    font-weight: 400;
    color: #222222;
    border-radius: 4px;
    cursor: pointer;

    .routeTitle {
      margin-left: 10px;
      font-size: 12px;
      font-weight: 400;
      // color: #000000;
    }

    .openBtn {
      position: absolute;
      right: 20px;
      width: 6px;
      height: 6px;
      border-radius: 1px;
      border-bottom: 1px solid #222;
      border-right: 1px solid #222;
      transform: rotate(-45deg);
      transition: transform 0.2s;
    }

    .opened {
      transform: rotate(45deg);
    }
  }

  .selectedBar {
    background: #f2f5ff;
    color: #7ea7ff !important;
  }

  .split {
    width: 156px;
    height: 32px;
    font-size: 10px;
    font-weight: 400;
    color: #999999;
    padding-left: 6px;
    line-height: 32px;
  }

  .first-level:hover {
    background: #f2f5ff;
    
  }

  .levelChild {
    padding-left: 10px;
    width: 154px !important;
  }
}
:deep(.el-menu-item ){
    height: 35px !important;
    line-height: 35px !important;
    font-size: 12px !important;
    }
  :deep(.el-sub-menu__title ){
  height: 35px !important;
  line-height: 35px !important;
  font-size: 12px !important;
  }
  :deep(.el-menu){
  border-right: 0 !important;
  }
</style>
